/*
* @Author: duyan
* @Date: 2020-03-31 10:20:35
* @Last Modified by: duyan
* @Last Modified time: 2020-08-18 13:50:53
*/

<!-- 搜索表单 -->
<template>
    <div class="ces-search">
        <Form ref="searchForm" :label-width="labelWidth" :model="searchData" :rules="searchRules" class="searchForm newBorderTop" inline>
            <FormItem v-for="item in searchForm" v-show="item.isShow?(item.isShow==='true'?true:false):true" :label="item.label?item.label:''" :prop="item.prop" :key="item.label" :label-width="item.labelWidth">
                <!-- 输入框 -->
                <Input
                        v-if="item.type==='input'"
                        :placeholder="item.placeholder"
                        v-model="searchData[item.prop]"
                        :style="{width:item.width}"
                        :disabled="item.disable && item.disable(searchData[item.prop])"
                        clearable
                        @change="item.change && item.change(that,searchData[item.prop])"
                        @input.native="item.inputChange&&item.inputChange(that,searchData[item.prop])"/>

                <treeselect
                        v-if="item.type==='org'"
                        v-model="searchData[item.prop]"
                        @input="(value)=>{searchFormOrgChangeHandle(value, 'createorArr', 'creatorGuid');item.change && item.change(that,searchData[item.prop])}"
                        :options="org" class='w300 show-checked-inline' placeholder="请选择组织"
                        :normalizer="(node)=>{return {id:node.guid,label:node.label,children:node.children,isDisabled:node.isDisabled}}"/>
                <Select v-if="item.type==='creator'" v-model="searchData[item.prop]" placeholder="入库人" @change="item.change && item.change(that,searchData[item.prop])"
                           :clearable="item.isClearable"
                           :multiple="item.isMultiple"
                           :disabled="item.change && item.change(that,searchData[item.prop])">
                    <el-option v-for="user in (createorArr?createorArr:[])" :key="user.guid" :label="user.userName" :value="user.guid"></el-option>
                </Select>

                <!-- 下拉框isMultiple（是否多选） -->
                <Select
                        v-if="item.type==='select'"
                        :clearable="item.isClearable"
                        :collapse-tags="item.isCollapseTags"
                        :multiple="item.isMultiple"
                        :placeholder="item.placeholder"
                        v-model="searchData[item.prop]"
                        :style="{width:item.width}"
                        :disabled="item.disable && item.disable(searchData[item.prop])"
                        @change="item.change && item.change(that,searchData[item.prop])">
                        <el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value"/>
                </Select>
                <!-- 下拉树 -->
                <treeselect
                        v-if="item.type==='treeselect'"
                        :style="{width:item.width}"
                        v-model="searchData[item.prop]"
                        :options="item.options"
                        :multiple="item.multiple"
                        :disabled="item.disabled && item.disabled(searchData)"
                        :disable-branch-nodes="item.branchNodes"
                        :show-count="true"
                        :clearable="item.clearable"
                        :auto-select-descendants="item.autoSelectDescendants"
                        :flat="item.flat"
                        :max-height="200"
                        :placeholder="item.placeholder"
                        value-consists-of="LEAF_PRIORITY"
                        no-results-text="无匹配选项"
                        no-options-text="无可用选项"
                        no-children-text="无子节点"
                        style="width: 100%;"
                        @select="item.change && item.change(that,searchData[item.prop])"
                />


                <!-- 时间 -->
                <TimePicker
                        v-if="item.type==='time'"
                        :placeholder="item.placeholder"
                        v-model="searchData[item.prop]"
                        :style="{width:item.width}"
                        :disabled="item.disable && item.disable(searchData[item.prop])"
                        type=""
                        @change="item.change && item.change(that,searchData[item.prop])"/>
                <!-- 日期时间 -->
                <DatePicker
                        v-if="item.type==='date'&&item.type==='datetime'||item.type==='daterange'||item.type==='datetimerange'"
                        :picker-options="item.pickerOptions"
                        :format="item.format"
                        :value-format="item.valueFormat"
                        :placeholder="item.placeholder"
                        :type="item.dateType"
                        :style="{width:item.width}"
                        v-model="searchData[item.prop]"
                        :disabled="item.disable && item.disable(searchData[item.prop])"
                        @change="item.change && item.change(that,searchData[item.prop])"/>


                <el-button v-if="item.type==='button'" :disabled="item.disabled && item.disabled()" :style="item.itemStyle" :type="item.buttonType" :icon="item.icon"  style="margin:auto" @click="item.handle(that)">{{ item.buttonLabel }}</el-button>
                <!--
				<render-custom-component
                        v-else-if="item.component && item.component.name"
                        v-model="searchData[item.prop]"
                        :component-name="item.component.name"
                        :props="item.component.props ? item.component.props : null"
                >
                </render-custom-component>
                <render-component
                        v-else-if="item.component && item.component.render"
                        :render-function="item.component.render"
                        :scope="item"
                >
                </render-component>
				-->
            </FormItem >
                <Button type="primary" @click="searchBtnClickHandle">搜索</Button>
        </Form>
    </div>
</template>

<script>
  import api from '@/api'
  //import RenderCustomComponent from '@d2-projects/d2-crud/src/components/renderCustomComponent.vue'
  //import RenderComponent from '@d2-projects/d2-crud/src/components/renderComponent.vue'

  // import * as commonApi from '@/api/common'
  export default {
    components: {
      //RenderCustomComponent,
      //RenderComponent
    },
    props: {
      that: { type: Object, default: this },
      isHandle: {
        type: Boolean,
        default: true
      },
      labelWidth: {
        type: Number,
        default: 100
      },
      searchForm: {
        type: Array,
        default: () => []
      },
      searchHandle: {
        type: Array,
        default: () => []
      },
      searchData: {
        type: Object,
        default: () => {}
      },
      searchRules: {
        type: Object,
        default: null
      }
    },
    computed: {

    },
    data() {
      return {
        // 入库人
        createorArr: []

      }
    },
    mounted() {
      this.searchForm.forEach(val => {
        if (val.prop === 'community') {
          this.getCommunity(val)
        }
      })
    },
    methods: {
      searchFormOrgChangeHandle (value, userArrKey, creatorGuidKey) {
        if (!value) { // 判断所属组织是否有值
          this[userArrKey] = []
        }
        api.ApiUserGetUserList({ organizationGuid : value, page: 1, pageSize: 9999 }).then(res => {
          this.$set(this,userArrKey, res.data.data.problemFeedbackList)
        })

        this.$set(this.searchForm,creatorGuidKey, undefined)
      },
      searchBtnClickHandle () {
        return this.$emit('search',this.searchData)
      }
    }

  }

</script>
<style>
    .el-date-editor .el-range-separator{
        width: 10%;
    }
    .buttonContent{
        text-align:left;
        padding-bottom: 10px;
    }
    .ces-search /deep/ .el-form-item{
        margin-bottom: 10px !important
    }

</style>


